<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="list">
            <!-- <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>21</td>
                <td>男</td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>18</td>
                <td>女</td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script>
        let studentsData = [
            { id: 1, name: '张三', age: 20, gender: '男' },
            { id: 2, name: '李四', age: 20, gender: '男' },
            { id: 3, name: '王五', age: 20, gender: '男' },
        ]

        list.innerHTML = studentsData.map(item => (
            `<tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>`
        )).join("")

        // list.innerHTML = studentsData.map(item => {
        //     return (
        //         `<tr>
        //             <td>${item.id}</td>
        //             <td>${item.name}</td>
        //             <td>${item.age}</td>
        //             <td>${item.gender}</td>
        //             <td>
        //                 <button>删除</button>
        //                 <button>修改</button>
        //             </td>
        //         </tr>`
        //     )
        // }).join("")

    </script>
</body>

</html>